<button mat-icon-button class="opacity-80 hover:opacity-100 hover:scale-110 transition-transform duration-200"
  [matTooltip]="'PAC.KEY_WORDS.Notification' | translate: {Default: 'Notification'}"
  matTooltipPosition="right"
  [cdkMenuTriggerFor]="statusNotifMenu"
>
  <mat-icon fontSet="material-icons-round">notifications</mat-icon>
</button>

@if (errors().length > 0) {
  <span class="ping-badge pointer-events-none absolute right-2 top-2 flex h-2 w-2">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"></span>
    <span class="relative inline-flex rounded-full h-2 w-2"></span>
  </span>
}

<ng-template #statusNotifMenu>
  <div cdkMenu class="max-h-[70vh] w-[300px] cdk-menu__medium rounded-xl"
    (click)="$event.stopPropagation()">
    <div class="flex justify-between items-center px-2">
      <h5 class="mb-2 text-lg font-bold tracking-tight">
        {{'PAC.KEY_WORDS.Notification' | translate: {Default: 'Notification'} }}

        <span>({{errors().length}})</span>
      </h5>

      <button mat-icon-button displayDensity="cosy" class="ml-6"
        [matTooltip]="'PAC.KEY_WORDS.ClearAll' | translate: {Default: 'Clear All'}"
        matTooltipPosition="above"
        (click)="clearErrors()">
        <mat-icon fontSet="material-icons-round">clear_all</mat-icon>
      </button>
    </div>

    <div class="flex flex-col overflow-auto" displayDensity="compact">
      <mat-list class="ngm-list">
        @for (error of errors(); track error; let i = $index) {
          <mat-list-item class="group relative" [matTooltip]="error">
            <p>{{error}}</p>

            <div matListItemMeta>
              <button mat-icon-button class="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                color="warn" (click)="clearError(i)">
                <mat-icon fontSet="material-icons-round">close</mat-icon>
              </button>
            </div>
          </mat-list-item>
        }
      </mat-list>
    </div>
  </div>
</ng-template>